//加减键
let oNumminus = document.querySelector(".numminus")
let oNumadd = document.querySelector(".numadd")
let oCounts = document.querySelector(".counts")
oNumminus.onclick = function () {
    oCounts.value--;
    if (oCounts.value < 0) {
        oCounts.value = 0
    }
}
oNumadd.onclick = function () {
    oCounts.value++;
}


//colorbox
$(".colorbox>ul").on("click", "li", function () {
    $(this).addClass("active").siblings("li").removeClass("active");
})

//sizebox
$(".sizebox>ul").on("click", "li", function () {
    $(this).addClass("active").siblings("li").removeClass("active");
    console.log($(this));
})


//放大镜
$(".pic").on("mouseover", function () {
    $("#box").show();
})
$(".pic").on("mouseout", function () {
    $("#box").hide();
})
// 1. 获取box
let oBox = document.querySelector("#box");
let leftBox = oBox.children[0]
let rightBox = oBox.children[1]
let mask = leftBox.children[0]

// 2. 事件
leftBox.onmouseover = function () {
    rightBox.style.display = 'block'
    mask.style.display = 'block'
}
leftBox.onmouseout = function () {
    rightBox.style.display = 'none'
    mask.style.display = 'none'
}
leftBox.onmousemove = function (e) {
    //     1. mask在动
    //     mask运动到哪儿了，
    let l = e.pageX - oBox.offsetLeft - leftBox.offsetLeft - mask.offsetWidth / 2;
    let t = e.pageY - oBox.offsetTop - leftBox.offsetTop - mask.offsetHeight / 2;

    // 边界限制
    if (l <= 0) {
        l = 0
    }
    if (l >= leftbox.clientWidth - mask.offsetWidth) {
        l = leftbox.clientWidth - mask.offsetWidth
    }

    if (t <= 0) {
        t = 0
    }
    if (t >= leftbox.clientHeight - mask.offsetHeight) {
        t = leftbox.clientHeight - mask.offsetHeight
    }
    mask.style.left = l + "px"
    mask.style.top = t + "px"

    // 2.  大图来运动
    rightBox.style.backgroundPositionX = -2 * l + "px"
    rightBox.style.backgroundPositionY = -2 * t + "px"


}


//根据商品编号获得商品详情
let oPic = document.querySelectorAll(".pic")
let see = new XMLHttpRequest();
see.open("get", "../images/php/goodsAndShoppingCart/getGoodsInfo.php?goodsId=001", true);
see.send();
see.onreadystatechange = function () {
    if (see.readyState == 4 && see.status == 200) {
        fun(see.responseText)
    }
}
function fun(text) {
    text = JSON.parse(text)
    console.log(text.goodsImg);

    oImg[0].src = text.goodsImg;
    console.log(text.goodsImg);
}









